<script>
// import { Picture as IconPicture } from '@element-plus/icons-vue'
export default {
  name: "CardIndex",
  props: ["title", "desc", "src", "path"],
  // components:[IconPicture],
  data() {
    return {}
  },
  methods: {
    go() {
      this.$store.commit("updateRoute", {
        name: this.title,
        path: this.path,
      })
      this.$router.push(this.path);
    }
  }
}
</script>

<template>
  <el-card shadow="hover">
    <!--    <template #header >-->
    <!--      <div class="card-header">-->
    <!--        <span>Card name</span>-->
    <!--      </div>-->
    <!--    </template>-->
    <!--    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>-->
    <!--    <template #footer>Footer content</template>-->
    <!--    {{desc}}-->
    <el-row>
      <el-col :span="10">
        <el-image class="img" :src="src" fit="cover">
          <template #error>
            <div class="image-slot">
              Loading...
            </div>
          </template>
        </el-image>
      </el-col>
      <el-col :span="14">
        <div class="title">
          <el-text tag="b" size="default">{{ title }}</el-text>
        </div>
        <div class="desc">
          <el-text type="info" size="small">{{ desc }}</el-text>
        </div>
      </el-col>
    </el-row>
    <el-row class="enter" type="flex" justify="end" align="middle">
      <el-button link type="primary" @click="go">点击进入</el-button>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  max-width: 300px;
  max-height: 200px;

  .img {
    .el-image {
      padding: 0 5px;
      max-width: 100px;
      max-height: 100px;
    }

    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      min-width: 50px;
      min-height: 50px;
      max-width: 100px;
      max-height: 100px;
      background: var(--el-fill-color-light);
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }
  }

  .title {
    margin-bottom: 6px;
  }
}
</style>